.collect {
  $icon: '../../../assets/res/img/icon_re.png';
  // .head {
  //   width: 100%;
  //   height: 156px;
  //   background: url('../../assets/src/img/mypoint_bg.png');
  //   margin-bottom: 36px;
  // }

  // .head .photo {
  //   display: inline-block;
  //   width: 100px;
  //   height: 100px;
  //   border-radius: 50%;
  //   overflow: hidden;
  //   margin: 28px 0;
  // }

  // .head .photo img {
  //   width: 100%;
  //   height: 100%;
  // }

  // .head .name {
  //   display: inline-block;
  //   height: 100px;
  //   margin: 28px;
  //   vertical-align: top;
  // }

  // .head .name span {
  //   display: block;
  //   font-weight: bold;
  //   margin-top: 4px;
  // }

  // .head .name a {
  //   display: block;
  //   width: 88px;
  //   height: 32px;
  //   text-align: center;
  //   line-height: 32px;
  //   color: #ee5959;
  //   border: 1px solid #ee5959;
  //   border-radius: 5px;
  //   margin-top: 26px;
  // }

  // .head .name h1 {
  //   font-weight: bold;
  //   line-height: 100px;
  // }

  // .head .info li {
  //   display: inline-block;
  //   width: 107px;
  //   height: 107px;
  //   vertical-align: top;
  //   margin: 24px 0 24px 28px;
  //   color: #fff;
  //   text-align: center;
  // }

  // .head .info li:nth-child(2n+1) {
  //   background: url('../../assets/src/img/bg_orange.png') no-repeat;
  //   background-size: 100% 100%;
  // }

  // .head .info li:nth-child(2n) {
  //   background: url('../../assets/src/img/bg_violet.png') no-repeat;
  //   background-size: 100% 100%;
  // }

  // .head .info span {
  //   display: block;
  //   margin-top: 32px;
  // }

  // .head .info p {
  //   margin-top: 6px;
  // }

  .w82 {
    width: 82.5%;
  }

  .w15 {
    width: 15.1%;
  }

  .con .layui-nav {
    background: #fff;
    padding: 0 3%;
  }

  .con .layui-nav .layui-nav-item {
    line-height: 52px;
    color: #484848;
    margin-right: 6%;
  }

  .con .layui-nav .layui-nav-item:hover {
    color: #f23e3e;
  }

  .con .layui-nav .layui-this:after,
  .layui-nav-bar,
  .layui-nav-tree .layui-nav-itemed:after {
    height: 3px;
    background-color: #f23e3e;
  }

  .con .layui-nav .layui-this {
    color: #f23e3e;
  }

  .con .layui-nav span {
    color: #808080;
  }

  .con .layui-nav select {
    color: #808080;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
  }

  .con li {
    padding: 20px 3%;
    border-bottom: 1px solid #e6e6e6;
  }

  .con .photo-img {
    display: inline-block;
    vertical-align: top;
    position: relative;
  }

  .con .photo {
    display: block;
    overflow: hidden;
  }

  .con .photo img {
    width: 100%;
    height: 100%;
  }

  .con .photo-mid {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  .con .photo-big {
    width: 180px;
    height: 120px;
  }

  .con .info {
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
  }

  .con .txt {
    line-height: 20px;
    color: #808080;
    height: 40px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .list-1 .title {
    font-weight: bold;
    max-width: 100%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .list-1 .photo-img {
    height: 110px;
    width: 64px;
  }

  .list-1 .photo-s {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
  }

  .list-1 .photo-s img {
    width: 100%;
    height: 100%;
  }

  .list-1 .photo-img .icon-mid {
    position: absolute;
    right: 8px;
    top: 50px;
  }

  .list-1 .price {
    width: 60px;
    height: 28px;
    color: #e94f4f;
    display: block;
    background-color: #fff2e2;
    border-radius: 14px;
    text-align: center;
    line-height: 28px;
    margin: 18px auto 0 auto;
  }

  .list-1 .info {
    display: inline-block;
    width: 844px;
    height: 110px;
    position: relative;
  }

  .list-1 .name {
    color: #00a0e9;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    margin-top: -8px;
  }

  .list-1 .line {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #cccccc;
    margin: 0 8px;
  }

  .list-1 .lab {
    color: #808080;
    display: inline-block;
    vertical-align: middle;
    margin-top: -8px;
  }

  .list-1 .txt {
    color: #484848;
    margin-top: 10px;
    height: 48px;
    line-height: 24px;
    position: relative;
  }

  .list-1 .txt img {
    width: 100%;
    height: 100%;
  }

  .list-1 .txt .unlock {
    position: absolute;
    width: 172px;
    height: 34px;
    line-height: 34px;
    color: #fff;
    background-color: #e94f4f;
    border-radius: 17px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
  }

  .list-1 .txt .unlock .icon {
    display: inline-block;
    vertical-align: middle;
    height: 14px;
    width: 14px;
    background-image: url($icon);
    background-repeat: no-repeat;
    background-position: 0 -36px;
    margin-right: 8px;
  }

  .list-1 .txt .look {
    position: absolute;
    width: 92px;
    height: 34px;
    line-height: 34px;
    color: #fff;
    background-color: #00a0e9;
    border-radius: 17px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
  }

  .list-1 .tips {
    color: #808080;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .list-1 .tips .mr16 {
    margin-right: 16px;
  }

  .list-1 .tips a {
    color: #808080;
  }

  .list .tips .icon {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    background-image: url($icon);
    background-repeat: no-repeat;
    margin-right: 6px;
  }

  .list .tips .icon-share {
    background-position: -66px -33px;
  }

  .list .tips .icon-collet {
    background-position: -127px -33px;
  }

  .list .tips .icon-praise {
    background-position: -191px -33px;
  }

  .list .tips [collet] .on {
    background-position: -127px 0;
  }

  .list .tips [praise] .on {
    background-position: -191px 0;
  }

  .list .load-more {
    display: block;
    width: 94%;
    height: 38px;
    border: 1px solid #e6e6e6;
    color: #808080;
    border-radius: 5px;
    background: #fff;
    margin: 20px auto;
  }

  .list-2 .info {
    width: 724px;
    height: 120px;
    margin: 0;
    position: relative;
  }

  .list-2 .title {
    max-width: 100%;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 9px;
    display: block;
  }

  .list-2 .info .tips {
    width: 97%;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #808080;
  }

  .list-2 .info .tips .photo {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
  }

  .list-2 .info .tips .line {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 12px;
    background: #808080;
    margin: -2px 10px 0 10px;
  }

  .list-2 .txt {
    line-height: 24px;
    height: 48px;
  }

  .list-2 .m4 {
    margin: 4px 0;
  }

  .guid {
    height: 670px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
  }

  .guid a {
    display: block;
    height: 56px;
    line-height: 56px;
    border-left: 4px solid #fff;
  }

  .guid a:hover .icon {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }

  .guid .icon {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    margin-right: 8px;
    margin-top: -4px;
  }

  .guid a:hover {
    border-left: 4px solid #ec4a36;
    background: #fafafa;
    color: #ec4a36;
  }

  .guid .on .icon {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }

  .guid .on {
    border-left: 4px solid #ec4a36;
    background: #fafafa;
    color: #ec4a36;
  }
}
